<html>
  <body>
    <!-- Show/Hide events only need to occur on the root of what's shown/hidden,
     not for each descendant. -->
    <div role="main" id="root">
      <div role="group" id="child1" lang="fr">   <!-- becomes ignored+included -->
        <div role="link" id="grandchild1" lang="ch">
          1
        </div>
      </div>
      <div role="group" id="child2" lang="es">   <!-- becomes ignored+included -->
        <div role="link" id="grandchild2" lang="ukr">   <!-- becomes ignored+included -->
          2
        </div>
      </div>
    </div>
    <script>
      function go() {
        // Setting the role to "none" makes the node ignored, while the lang
        // attribute makes it "ignored but included in tree".
        document.querySelector('#child1').role = 'none';
        document.querySelector('#child2').role = 'none';
        document.querySelector('#grandchild2').role = 'none';
      }
    </script>
  </body>
</html>
